<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabs切换 V2</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .title {
            display: flex;
        }

        .title li {
            margin-right: 15px;
            cursor: pointer;
        }

        .title .active {
            color: red;
        }

        .content li {
            display: none;
        }

        .content .active {
            display: block !important;
        }
    </style>
</head>

<body>

    <ul class="title"></ul>

    <ul class="content"></ul>
</body>
<script>
    // 发送ajax请求获取这个数组
    let data = [
        {
            id: 1,
            title: '社会',
            content: [
                { text: '社会的内容1' },
                { text: '社会的内容2' },
                { text: '社会的内容3' }
            ]
        },
        {
            id: 2,
            title: '经济',
            content: [
                { text: '经济 的内容1' },
                { text: '经济 的内容2' },
                { text: '经济 的内容3' },
                { text: '经济 的内容4' },
            ]
        },
        {
            id: 3,
            title: '体育',
            content: [
                { text: '体育 的内容1' },
                { text: '体育 的内容2' }
            ]
        },
        {
            id: 4,
            title: '科技',
            content: [
                { text: '科技 的内容1' },
                { text: '科技 的内容2' },
                { text: '科技 的内容3' },
            ]
        }
    ];

    let title = $(".title"), content = $(".content");

    function renderPage() {
        data.forEach(function (v, i) {
            title.innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
            content.innerHTML +=
                `<li class="${i == 0 ? 'active' : ''}">
               ${
                    v.content.map(function (item) {
                        return `<p>${item.text}</p>`
                    })
                }
            </li>`;
        })

        bindClcik();
    }

    function bindClcik() {
        let titleLi = _(".title li"), contentLi = _(".content li");
        titleLi.forEach(function (v, i) {
            v.onclick = function () {
                titleLi.forEach(function (val, index) {
                    val.className = ""
                    contentLi[index].className = ""
                })
                v.className = "active"
                contentLi[i].className = "active"
            }
        })
    }


    Array.prototype.map = function (callback) {
        let result = []
        for (let index = 0; index < this.length; index++) {
            result.push(callback(this[index], index, this))
        }
        return result.toString().replaceAll(",", "");
    }

    renderPage()

    function $(className) {
        return document.querySelector(className);
    }

    function _(className) {
        return document.querySelectorAll(className);
    }

</script>

</html>